<template>
    <div class='inventory w100 h100 df fd-c jc-sb'>
        <ul class="top  df jc-sb">
            <li>库存总金额</li>
            <li>数量</li>
            <li>超期金额</li>
            <li class="df fd-c ">
                <span class="f1">对比上期总金额</span>
                <span class="f1">超期金额</span>
            </li>
        </ul>
        <div class="center f1 w100 h100">
            <div>
                <inventoryChart></inventoryChart>
            </div>
            <div>
                <inventoryChart2></inventoryChart2>
            </div>
            <div>
                <inventoryChart3></inventoryChart3>
            </div>

        </div>
        <div class="bottom f1" style="width: 80%;margin: auto;">
            <inventoryChart4></inventoryChart4>
        </div>

    </div>
</template>

<script>
import inventoryChart from '@/components/inventoryChart1.vue';
import inventoryChart2 from '@/components/inventoryChart2.vue';
import inventoryChart3 from '@/components/inventoryChart3.vue';
import inventoryChart4 from '@/components/inventoryChart4.vue';

export default {
    name: '',
    components: { inventoryChart, inventoryChart2, inventoryChart3, inventoryChart4 },
    data() {
        return {
        }
    },
    created() { },
    mounted() { },
    methods: {}
}
</script>
<style scoped lang='scss'>
.inventory {
    .top {
        width: 100%;
        height: 200px;
        padding: 0 30px;
        box-sizing: border-box;

        li {
            width: 20%;
            // border: 1px solid #000;
            text-align: center;
            background: url(../../assets/home/lan.png) no-repeat;
            background-size: 100% 100%;
            color: #fff;
        }
    }

    .center {
        >div {
            float: left;
            width: 33.33%;
            height: 100%;
            // border: 1px solid #000;
        }
    }


}

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}
</style>
